<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>首都医科大学附属小学用户登录</title>
		<meta name="format-detection" content="telephone=no">
	    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
	    <meta name="apple-mobile-web-app-capable" content="yes">
	    <meta name="apple-touch-fullscreen" content="yes">
	    <meta http-equiv="Access-Control-Allow-Origin" content="*">
	    <link rel="stylesheet" type="text/css" href="../static/font/font-awesome.min.css"/>
	    <link rel="stylesheet" type="text/css" href="../static/css/global.css"/>
	    <script type="text/javascript" src="../static/js/jquery-1.8.3.min.js"></script>
		<script type="text/javascript">
		$(document).ready(function(){
			var $tab_li = $('#tab ul li');
			$tab_li.click(function(){
				$(this).addClass('selected').siblings().removeClass('selected');
				var index = $tab_li.index(this);
				$('div.tab_box > div').eq(index).show().siblings().hide();
			});	
		});
		</script>
	    <style>
	    	/*登录界面整体风格*/
			html {
				overflow-y:scroll;
				vertical-align:baseline;
				font-family:"Microsoft YaHei","Open Sans",sans-serif;
			}
			body {
			    height: auto;
			    background:url(../static/images/login-2.png) no-repeat fixed center center / cover;
			}
			* {
				margin:0 auto;
				padding:0px;
			}
			ul, li {
				list-style:none
			}
			/*tab登录选项卡*/
			#tab {
				width: 100%;
			    height: auto;
			    padding: 0.5rem;
			    box-sizing: border-box;
			    margin-top: 60px;
			}
			#tab h2{
				font-size: 1.2rem;
				text-align: center;
				margin-bottom: 50px;
				color: #FFFFFF;
				font-weight: normal;
				line-height: 2.25rem;
				text-shadow: none;
			}
			#tab .tab_menu {
				width:100%;
				z-index:1;
			}
			#tab .tab_menu li {
				float:left;
				width:49%;
				height:2.25rem;
				line-height:2.25rem;
				border-bottom:0px;
				cursor:pointer;
				text-align:center;
				margin:0 1% 0 0;
				border-bottom: none;
				background:rgba(255,255,255,0.6);
				color:#333;
				font-size:0.85rem;
				box-sizing: border-box;
				text-shadow: none;
			}
			#tab .tab_menu li:last-child{
				float: right;
				margin-right: 0px;
			}
			#tab .tab_box {
				width:100%;
				clear:both;
				position:relative;
				background:rgba(255,255,255,0.6);
				color:#333;
				font-size:0.85rem;
			}
			#tab .tab_menu .selected {
				cursor:pointer;
				background:rgba(255,255,255,0.6);
				color:#333;
				font-size:0.85rem;
				border-top: 2px solid #E60012;
				line-height:2.5rem;
				height:2.5rem;
				margin-top: -0.25rem;
				font-weight: 600;
			}
			#remember input{
				width:16px;
				height:16px;
			}
			#remember label{
				font-size: 14px;
			}
			.hide {
				display:none;
			}
			.tab_box div {
				padding:10px;
				width:100%;
				box-sizing: border-box;
			}
			.tab_box div #password,.tab_box div #username{
				padding:5px 10px;
			}
			.tab_box div label{
				display: inline-block;
				width: 70px;
			}
			.tab_box div input{
				display: inline-block;
				background: #ffffff;
				border:none;
			}
			input[type=text], input[type=password] {
				width:90%;
				height:2rem;
				margin-top:10px;
				padding:0px 15px;
				box-shadow: none;
				color:#999;
				font-size:16px;
			}
			#code{
				position:relative;
			}
			#code input {
				width:95px;
			}
			#code img {
				width:100px;
				height:40px;
				border:none;
				display:inline-block;
				position: absolute;
				top:18px;
				right:40px;
			}
			button {
				cursor:pointer;
				width:100%;
				line-height:2rem;
				padding:0;
				background:#E60012;
				border-radius:2px;
				color:#fff;
				font-size:1rem;
				letter-spacing:3px;
				box-shadow: none;
				border:none;
			}
			input:focus {
				outline:none;
				border:1px solid rgba(0, 0, 0, 0.4);
			}
			button:hover {
				background:#D90012;
			}
	    	.topnav {
			    position: fixed;
			    width: 100%;
			    height: 2.25rem;
			    background-color: #FFFFFF;
			    top: 0;
			    left: 0;
			    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
			}
			.topnav_return {
			    float: left;
			    width: 11px;
			    height: 22px;
			    margin: 12px 10px;
			}
			.topnav_return img {
			    width: 100%;
			}
			.topnav_t {
			    width: 30%;
			    line-height: 2.25rem;
			    text-align: center;
			    margin: 0 auto;
			}
	    </style>
	</head>
	<body>
		<div class="topnav">
			<div class="topnav_return">
				<i class="fa fa-angle-left f"></i>
			</div>
			<div class="topnav_t">
				登录
			</div>
		</div>
		<div id="tab">
	<h2>首都医科大学附属小学<br />
		智慧校园平台</h2>
  <ul class="tab_menu">
    <li class="selected">教师登录</li>
    <li>管理员登录</li>
  </ul>
  <div class="tab_box"> 
   <!-- 教师登录开始-->
    <div>
     <div class="tea_error_box"></div>
      <form action="" method="post" class="tea_login_error">
        <div id="username">
          <input type="text" id="tea_username_hide" name="username" value="输入教工号" nullmsg="教师号不能为空！" datatype="s6-18" errormsg="教工号范围在6~18个字符之间！" sucmsg="教工号验证通过！"/>
        </div>
        <div id="password">
          <input type="password" id="tea_password_hide" name="password" value="输入密码" nullmsg="密码不能为空！" datatype="*6-16" errormsg="密码范围在6~16位之间！" sucmsg="密码验证通过！"/>
        </div>
        <div id="remember">
          <input type="checkbox" name="remember">
          <label>记住密码</label>
        </div>
        <div id="login">
          <button type="submit" >登录</button>
        </div>
      </form>
    </div>
     <!-- 教师登录结束-->
     <!-- 管理员登录开始-->
    <div class="hide">
    <div class="sec_error_box"></div>
      <form action="" method="post" class="sec_login_error">
        <div id="username">
          <input type="text" id="sec_username_hide" name="username" value="输入教务号" nullmsg="管理员号不能为空！" datatype="s6-18" errormsg="教务号范围在6~18个字符之间！" sucmsg="教务号验证通过！"/>
        </div>
        <div id="password">
          <input type="password" id="sec_password_hide" name="password" value="输入密码" nullmsg="密码不能为空！" datatype="*6-16" errormsg="密码范围在6~16位之间！" sucmsg="密码验证通过！"/>
        </div>
        <div id="remember">
          <input type="checkbox" name="remember">
          <label>记住密码</label>
        </div>
        <div id="login">
          <button type="submit" >登录</button>
        </div>
      </form>
    </div>
     <!-- 管理员登录结束-->
  </div>
</div>
	</body>
</html>
